<template>
  <section class="component component--layout layout--B1">
    <header class="header header--primary">
      <h2 class="title">
        <span class="label">LATEST</span>
      </h2>
    </header>
    <div class="column column--primary">
      <div
        class="element element--article is-lead"
        v-for="(item, index) in lastleftData1"
        :key="index"
      >
        <figure class="article__figure">
          <router-link
            :to="{
              name: 'NewDetail',
              params: { uuid: item.uuid, author: item.author },
            }"
          >
            <a class="figure__image disableShadowBox">
              <img class="lazyautosizes lazyloaded" :src="item.imgUrl" />
            </a>
          </router-link>
        </figure>
        <div class="article__content">
          <h3 class="article__headline">
            <router-link
              :to="{
                name: 'NewDetail',
                params: { uuid: item.uuid, author: item.author },
              }"
            >
              <a class="link">
                {{ item.title }}
              </a>
            </router-link>
          </h3>
          <p class="article__summary">{{ item.content }}</p>
        </div>
      </div>
    </div>
    <div class="column column--aside">
      <imgTextMd :lastRightData="lastRightData"></imgTextMd>
    </div>
  </section>
</template>
<script setup>
import imgTextMd from "../../imgTextMd/imgTextMd.vue";
const props = defineProps(["lastleftData"]);
console.log(props);
const lastleftData1 = props.lastleftData.slice(0, 1);
const lastRightData = props.lastleftData.slice(1, 5);
</script>
<style scoped lang="scss">
.title {
  text-align: left;
}
</style>
